<template>
	<view class="home">
		<z-header :pageScrollData="pageScrollData" :background="showMenu||showSearch?'none':''">
			<view slot="left" class="search" @click="onSearchShow">&#xe610;</view>
			<view v-if="showSearch" class="search-masker">
				<view class="web-font-thin search-wraper" :style="{'height': systeminfo.navHeight + 'px'}">
					<input placeholder="搜索有声读物或音乐..." placeholder-style="color:#fff" />
					<text class="iconfont" @click="onSearchHide">&#xe612;</text>
				</view>
			</view>
			<view v-if="!showSearch" class="header-title" @click="onMenuClick">所有类型<text class="iconfont">&#xe60d;</text></view>
			<view v-if="showMenu" class="menu-masker" :style="{'padding-top': systeminfo.navHeight + 'px'}">
				<view class="web-font-thin menu-wraper">
					<view class="item" v-for="(v,i) in menu" :key="i">{{v.name}}</view>
				</view>
			</view>
		</z-header>
		<view class="list-wraper" :data-filter="showMenu||showSearch">
			<view v-for="(v,i) in list" :key="i" class="item" :data-reverse="i%2">
				<view class="outer" @click="navigateTo($event, v._id)" :data-url="'/pages/play/play?id=' + v._id">
					<view class="inner">
						<image :src="v.previewImg" mode="aspectFill"></image>
						<text class="iconfont play-btn">&#xe611;</text>
					</view>
				</view>
				<view class="outer">
					<view class="inner info-wraper">
						<view class="top">
							<view class="avatar-wraper">
								<avatar :src="v.avatarUrl" :name="v.author" circle sm></avatar>
								<text class="iconfont" @click="likeHandle($event, i, !v.liked)">{{v.liked ? '\ue60f' : '\ue60e'}}</text>
							</view>
							<view class="item-title" @click="navigateTo($event, v._id)" data-url="/pages/play/play">{{v.name}}</view>
						</view>
						<view class="foot web-font-thin">{{v.likedCount}} 收听者</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systeminfo: this.$systemInfo,
				pageScrollData: {scrollTop:0},
				showSearch: false,
				showMenu: false,
				menu: [
					{name:'有声读物'},
					{name:'独立音乐/读物'},
					{name:'欢快音乐'},
					{name:'纯音乐'},
					{name:'轻音乐'}
				],
				list: [
					{
						_id: 1,
						previewImg: '/static/home/item1.jpg',
						avatarUrl: '/static/avatar1.jpg',
						liked: true,
						likedCount: '22,033',
						name: 'Confidence Boost',
						author: 'Author1'
					},{
						_id: 2,
						previewImg: '/static/home/item2.jpg',
						avatarUrl: '/static/avatar2.jpg',
						liked: false,
						likedCount: '22,033',
						name: 'Accoustic Morning Accoustic Morning',
						author: 'Author1'
					},{
						_id: 3,
						previewImg: '/static/home/item3.jpg',
						avatarUrl: '/static/avatar3.jpg',
						liked: false,
						likedCount: '22,033',
						name: 'Pop Goes Classical',
						author: 'Author1'
					},{
						_id: 4,
						previewImg: '/static/home/item1.jpg',
						avatarUrl: '/static/avatar1.jpg',
						liked: false,
						likedCount: '22,033',
						name: 'Confidence Boost',
						author: 'Author1'
					}
				]
			}
		},
		methods: {
			navigateTo(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
			likeHandle(e, i, status){
				// 存储时间戳避免连续点击发起频繁请求
				if(this.list[i].lastTime === undefined || e.timeStamp - this.list[i].lastTime > 500){
					this.list[i].liked = status
					this.list[i].lastTime = e.timeStamp
				}
			},
			onMenuClick(){
				this.showMenu = !this.showMenu
				if(this.showMenu)
					uni.hideTabBar()
				else
					uni.showTabBar()
			},
			onSearchShow(){
				this.showSearch = true
				uni.hideTabBar()
				if(this.showMenu)this.showMenu = false
			},
			onSearchHide(){
				this.showSearch = false
				uni.showTabBar()
			}
		},
		onPageScroll(e){
			this.pageScrollData = e
		}
	}
</script>

<style lang="scss">
	.home{
		.menu-masker, .search-masker{
			position: fixed;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			left: 0;
			top: 0;
			background: rgba(37,40,51,0.85);
		}
		.menu-wraper{
			border-top: solid 1upx rgba(255,255,255,0.2);
			text-align: center;
			padding: 0 30upx;
			.item{
				padding: 50upx 0;
				border-bottom: solid 1upx rgba(255,255,255,0.2);
				&:last-of-type{
					border: 0;
				}
			}
		}
		.search{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 88upx;
			font-size: 34upx;
			position: relative;
			z-index: 8;
		}
		.search-wraper{
			display: flex;
			align-items: center;
			padding-left: 88upx;
			border-bottom: solid 1upx rgba(255,255,255,0.2);
			.iconfont{
				flex: 0 0 88upx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			input{
				flex: 1 0 auto;
			}
		}
		.header-title{
			position: relative;
			z-index: 8;
			font-size: $font-size-lg - 4upx;
			.iconfont{
				font-size: 16upx;
				position: absolute;
				top: 50%;
				line-height: 16upx;
				margin-top: -8upx;
				left: 100%;
				margin-left: 20upx;
				color: rgba(255,255,255,.8);
			}
		}
		.list-wraper{
			padding: 15upx;
			&[data-filter="true"]{
				filter: blur(8upx);
			}
			.item{
				display: flex;
				position: relative;
				margin-bottom: 30upx;
				&[data-reverse="1"] .outer:nth-child(2){
					order: -1;
				}
				&:last-of-type{
					margin-bottom: 0;
					&::after{
						display: none;
					}
				}
				&::after{
					content: '';
					display: block;
					border-top: solid 1upx rgba(255,255,255,.2);
					bottom: -15upx;
					left: 15upx;
					width: calc(100% - 30upx);
					position: absolute;
				}
			}
			.outer{
				padding: 15upx;
				flex: 0 0 50%;
				box-sizing: border-box;
			}
			.inner{
				background: rgba(255,255,255,0.2);
				height: 100%;
				border-radius: 10upx;
				overflow: hidden;
				box-sizing: border-box;
				position: relative;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.info-wraper{
				padding: 30upx;
				align-content: space-between;
			}
			.avatar-wraper{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.iconfont{
					font-size: $font-size-lg;
					transition: all .3s;
					&:active{
						transform: scale(1.1);
					}
				}
			}
			.item-title{
				font-size: $font-size-lg;
				margin: 30upx 0;
				line-height: 1.3em;
				height: 2.6em;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.foot{
				font-size: $font-size-md;
				opacity: .6;
			}
			.play-btn{
				position: absolute;
				display: block;
				width: 2.6em;
				height: 2.6em;
				background: rgba(0,0,0,.3);
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 9;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				margin-top: -1.3em;
				margin-left: -1.3em;
			}
		}
	}
</style>
